<template>
    <el-select
      v-model="modelValue"
      :placeholder="placeholder || $t('search.placeholder')"
      :multiple="multiple"
      size="default"
      class="select"
      clearable
      @change="updateValue"
    >
      <el-option
        v-for="item in options"
        :key="optionsKey || item.value"
        :label="optionsLable || item.label"
        :value="optionsValue || item.value"
      />
    </el-select>
</template>

<script setup lang="ts">
import i18n from "@/lang/index";
const $t = i18n.global.t;
const props = defineProps({
    modelValue: {
        type: String || Array,
    },
    placeholder: {
        type: String,
        default: '',
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    options: {
        type: Array,
        default: [],
    },
    optionsLable: String,
    optionsValue: String,
    optionsKey: String,
})
// const value = ref('')
const { modelValue, placeholder, options, optionsLable, optionsValue, optionsKey } = toRefs(props)
const emits = defineEmits(['update:modelValue'])
//   watch(value, (newV) => {
//     emits('update:modelValue', newV)
// })
const updateValue = (event) => {
    emits('update:modelValue', event);
}
</script>

<style lang="scss" scoped>
.select {
    width: 100%;
}
</style>
